<template>
  <div
    :class='{ unLockLogin: isShowLogin }'
    class='lockscreen'
    @keyup='unLockLogin(true)'
    @mousedown.stop
    @contextmenu.prevent
  >
    <template v-if='!isShowLogin'>
      <div class='lock-box'>
        <div class='lock'>
          <span class='lock-icon' title='解锁屏幕' @click='unLockLogin(true)'>
            <lock-outlined />
            <unlock-outlined />
          </span>
        </div>
        <h6 class='tips'>点击解锁</h6>
      </div>
      <!-- 小米 / 华为 充电-->
      <component
        :is='randomCompName'
        :battery='battery'
        :battery-status='batteryStatus'
        :calc-discharging-time='calcDischargingTime'
      />
    </template>
    <template v-if='isShowLogin'>
      <div class='login-box'>
        <Avatar :size='128'>
          <template #icon>
            <user-outlined />
          </template>
        </Avatar>
        <div class='username'>{{ loginForm.username }}</div>
        <a-input-search
          v-model:value='loginForm.password'
          type='password'
          autofocus
          placeholder='请输入登录密码'
          size='large'
          @search='onLogin'
        >
          <template #enterButton>
            <LoadingOutlined v-if='loginLoading' />
            <arrow-right-outlined v-else />
          </template>
        </a-input-search>
        <a style='margin-top: 10px' @click='nav2login'>重新登录</a>
      </div>
    </template>
    <template v-if='!isShowLogin'>
      <div class='local-time'>
        <div class='time'>{{ hour }}:{{ minute }}</div>
        <div class='date'>{{ month }}月{{ day }}号，星期{{ week }}</div>
      </div>
      <div class='computer-status'>
        <span :class='{ offline: !online }' class='network'>
          <WifiOutlined class='network' />
        </span>
        <ApiOutlined />
      </div>
    </template>
    <charge1></charge1>
  </div>
</template>

<script>
import XiaomiCharge from "@/components/LockScreen/xiaomi-charge"
import Charge1 from "@/components/LockScreen/charge1"

export default {
  name: "LockScreenPage",
  components: { Charge1, XiaomiCharge },
  props: {},
  data() {
    return {
      isShowLogin: false,
      randomCompName: "Charge1",
      batteryStatus: 0,
      calcDischargingTime:0,
      battery: 100,
      hour: "",
      minute: "",
      month: "",
      day: "",
      week: "",
      online: false,
      loginLoading: false, // 正在登录
      loginForm: {
        username: "",
        password: ""
      },
      isLock: false
    }
  },
  watch: {},
  created() {

  },
  methods: {
    unLockLogin() {

    },
    onLogin() {
      
    },
    nav2login(){
      
    }
  }
}


</script>

<style lang='less' scoped>
.lockscreen {
  display: flex;
  position: fixed;
  z-index: 9999;
  inset: 0;
  overflow: hidden;
  background: #000;
  color: white;

  &.unLockLogin {
    background-color: rgb(25 28 34 / 78%);
    backdrop-filter: blur(7px);
  }

  .login-box {
    display: flex;
    position: absolute;
    top: 45%;
    left: 50%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);

    > * {
      margin-bottom: 14px;
    }

    .username {
      font-size: 30px;
    }
  }

  .lock-box {
    position: absolute;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 34px;

    .tips {
      color: white;
      cursor: text;
    }

    .lock {
      display: flex;
      justify-content: center;

      .lock-icon {
        cursor: pointer;

        .anticon-unlock {
          display: none;
        }

        &:hover .anticon-unlock {
          display: initial;
        }

        &:hover .anticon-lock {
          display: none;
        }
      }
    }
  }

  .local-time {
    position: absolute;
    bottom: 60px;
    left: 60px;
    font-family: helvetica;

    .time {
      font-size: 70px;
    }

    .date {
      font-size: 40px;
    }
  }

  .computer-status {
    position: absolute;
    right: 60px;
    bottom: 60px;
    font-size: 24px;

    > * {
      margin-left: 14px;
    }

    .network {
      position: relative;

      &.offline::before {
        content: '';
        position: absolute;
        z-index: 10;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 28px;
        transform: translate(-50%, -50%) rotate(45deg);
        background-color: red;
      }
    }
  }
}
</style>
